<!--
 * @Author: your name
 * @Date: 2020-08-07 10:26:22
 * @LastEditTime: 2020-09-23 14:43:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \devops\VueElementUINew\src\views\git\repository\setting.vue
-->
<template>
  <div class="repository-detail">
    <div class="repository-detail-header">
      <div
        v-for="(item, index) in routes"
        :key="index"
        @click="tabChange(item)"
        :class="{active: $route.name === item.name}"
      >{{ item.meta.title }}</div>
    </div>
    <div class="repository-detail-content">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modules: [{
        id: '1',
        name: '源文件',
        componentName: 'code',
        hidden: false
      }, {
        id: '2',
        name: '提交',
        componentName: 'commit',
        hidden: false
      }, {
        id: '3',
        name: '分支',
        componentName: 'branch',
        hidden: false
      }, {
        id: '4',
        name: '标签',
        componentName: 'tag',
        hidden: true
      }, {
        id: '5',
        name: '合并请求',
        componentName: 'merge',
        hidden: false
      }, {
        id: '6',
        name: '文档',
        componentName: 'wiki',
        hidden: false
      }, {
        id: '7',
        name: '成员',
        componentName: 'member',
        hidden: false
      }, {
        id: '8',
        name: '设置',
        componentName: 'webhook',
        hidden: false
      }, {
        id: '9',
        name: 'SSH密钥',
        componentName: 'ssh',
        hidden: false
      }],
      currentView: 'code'
    }
  },
  computed: {
    routes() {
      return this.$router.options.routes.find(v => v.name === 'source').children.find(v => v.name === 'git').children
    }
  },
  methods: {
    tabChange(route) {
      const { pid, pname } = this.$route.params
      switch (route.name) {
        case 'code':
          this.$router.push({ path: `/git/code/${pid}/${pname}/master/root` })
          break;
        case 'commit':
          this.$router.push({ path: `/git/commit/${pid}/${pname}` })
          break;
        case 'branch':
          this.$router.push({ path: `/git/branch/${pid}/${pname}` })
          break;
        case 'tag':
          this.$router.push({ path: `/git/tag/${pid}/${pname}` })
          break;
        case 'merge':
          this.$router.push({ path: `/git/merge/${pid}/${pname}` })
          break;
        case 'wiki':
          this.$router.push({ path: `/git/wiki/${pid}/${pname}` })
          break;
        case 'member':
          this.$router.push({ path: `/git/member/${pid}/${pname}` })
          break;
        case 'webhook':
          this.$router.push({ path: `/git/webhook/${pid}/${pname}` })
          break;
        case 'ssh':
          this.$router.push({ path: `/git/ssh/${pid}/${pname}` })
          break;
        default:
          break;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.repository-detail {
  height: 100%;
  overflow: auto;
  background-color: #FFFFFF;
  padding: 30px 40px 20px;
  &-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 32px;
    font-size: 14px;
    margin-bottom: 16px;
    & > div {
      height: 24px;
      cursor: pointer;
      &.active {
        color: #409EFF;
        border-bottom: 1px solid #409EFF;
      }
      & + div {
        margin-left: 32px;
      }
    }
  }
  &-content {
    height: calc(100% - 48px);
    overflow: auto;
    
  }
}
</style>